<template>
    <div>
        <div id="editor">
        </div>
        <div class="artForm">
            <el-form :model="articleForm" :rules="articleRules" ref="articleRef"
                     label-width="100px">
                <el-form-item>
                    <el-select v-model="articleForm.path" placeholder="请选择分类">
                        <el-option label="html-css-js" value="addHcj"></el-option>
                        <el-option label="vueJs" value="addVue"></el-option>
                        <el-option label="nodeJs" value="addNode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="articleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="图片链接">
                    <el-input v-model="articleForm.imgUrl" placeholder="可选项"
                             ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="send_btn">
            <el-button @click="send" >发布文章</el-button>
        </div>
    </div>
</template>

<script>
    import E from 'wangeditor';
    import {addArticle} from "../../network/article";

    export default {
        name: "Article",
        data(){
            return {
                editor:null,
                articleForm:{
                    authorName:'',
                    path:'',
                    title:'',
                    content:'',
                    imgUrl:""
                },
                articleRules:{
                    title:[{required:true,message:'请输入标题',trigger:'blur'}]
                }
            }
        },
        mounted() {
            this.editor = new E('#editor');
            // 或者 var editor = new E( document.getElementById('editor') )
            // 自定义菜单配置
            this.editor.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'emoticon',  // 表情
                'code',  // 插入代码
            ];
            this.editor.create();
        },
        methods:{
            //发表文章
            send(){
                if (this.$store.state.userInfo.length === 0){
                    this.$message.warning('请登录后发表文章！')
                }else {
                    this.articleForm.content = this.editor.txt.html();
                    this.articleForm.authorName = this.$store.state.userInfo[0].result[0].userName;
                    this.$refs.articleRef.validate(valid => {
                        if (valid !== true){
                            this.$message.warning('请输入必要信息');
                        }else {
                            addArticle(this.articleForm).then(res => {
                                if (res.data.meta.status !== 200){
                                    this.$message.error(res.data.meta.msg)
                                }else{
                                    this.$message.success(res.data.meta.msg);
                                    switch(this.articleForm.path){
                                        case "addHcj": this.$router.push('/hcj');
                                        break;
                                        case "addVue": this.$router.push('/vueNote');
                                        break;
                                        case "addNode": this.$router.push('/node');
                                        break;
                                    }
                                }
                            });
                        }
                    });
                }
            },
        },
    }
</script>

<style scoped lang="less">
    #editor{
        background-color: #fffdef;
        opacity: 0.8;
        width: 100%;
    }
    .artForm {
        width: 100%;
        margin-top: 1rem;
        display: flex;
        justify-content: center;
        .el-input{
            width:22rem;
        }
    }
    .send_btn{
        width: 100%;
        text-align: center;
    }
</style>